<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref} from "vue";
import {getWebNavbar} from "@/api/system/system";
import {ECode} from "@/util/commonUtil";
import {router} from "@/router";
import {message} from "ant-design-vue";

const menuList = ref<any>([])
const timer = ref<any>(null)
onMounted(() => {
  getWebNavbarList()
})
onBeforeUnmount(() => {
  clearTimeout(timer.value)
})
const getWebNavbarList = () => {
  let params: any = {};
  params.isShow = 1;
  getWebNavbar(params).then((response: any) => {
    if (response.code === ECode.SUCCESS) {
      let dataList = response.data;
      for (let item = 0; item < dataList.length; item++) {
        if (dataList[item].isShow === 1) {
          //@ts-ignore
          menuList.value.push(dataList[item])
        }
      }
    }
  })
}

const clickMenuItem = (item: any) => {
  if (item.url) {
    if (item.isJumpExternalUrl == 0) {
      router.push({path: item.url})
    } else {
      message.info('正在跳转外部链接')
      timer.value = setTimeout(() => {
        window.open(item.url, '_blank')
      }, 500);
    }
  } else {
    message.info('无跳转路径!')
  }
}
</script>

<template>
  <div class="site-menu flex items-center relative ml-4 h-full">
    <input hidden="" type="checkbox" id="menu-open" class="dialog-check fixed">
    <nav class="menu-out dialog-area h-full">
      <ul class="menu flex list-none mb-0 cursor-pointer h-full">
        <template v-for="item in menuList" :key="item.uid">
          <li class="menu-item flex justify-center items-center pt-1 pb-1 pl-2 pr-2 cursor-pointer"
              :class="item.childWebNavbar.length > 0 ? 'hasChildMenu': ''">
            <span
                class="font-semibold"
                :style="{color:item.color}"
                @click="clickMenuItem(item)">
              {{ item.name }}
            </span>
            <!-- 子菜单 -->
            <div class="childWebNavbar" v-if="item.childWebNavbar.length > 0">
              <template v-for="child in item.childWebNavbar">
                <span class="text-center w-full flex justify-center hover:text-blue-500"
                      :style="{color:child.color}"
                      @click="clickMenuItem(child)">
                  {{ child.name }}
                </span>
              </template>
            </div>
          </li>
        </template>
      </ul>
    </nav>
  </div>
</template>

<style lang="css" scoped>
.dialog-check {
  all: unset;
  position: fixed;
  background: var(--w-bg);
  inset: 0;
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  cursor: pointer;
  transition: .7s;
}

.site-menu {
  flex: 1;
  font-size: var(--font-size-medium);
}

.menu-out {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
}

.childWebNavbar {
  position: fixed;
  width: min(10rem, 100%);
  max-height: calc(100vh - var(--edge-tb) - var(--gap-span));
  padding: .5em;
  margin: 0 0 0 -2.5em;
  top: var(--edge-tb);
  border: var(--border);
  border-radius: 4px;
  background: var(--s-bg, hsl(0 0% 100% / .8));
  backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: var(--box-shadow-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-1rem);
  transform-origin: top left;
  overflow: clip auto;
  z-index: 30;
  transition: .5s cubic-bezier(.6, .1, 0, 1);
}

.menu-out .menu .hasChildMenu:hover > .childWebNavbar {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  will-change: transform;
}

@media (width <= 641px) {
  .dialog-area {
    position: fixed;
    inset: auto 0 0;
    width: auto;
    max-width: 100%;
    max-height: calc(100% - var(--nav-height));
    outline: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--s-bg, hsl(0 0% 98% / .8));
    backdrop-filter: blur(15px);
    box-shadow: var(--box-shadow);
    transform: scaleX(.95) translateY(100%);
    opacity: 0;
    visibility: hidden;
    transition: .5s cubic-bezier(.6, .1, 0, 1);
  }

  .menu-out .menu {
    display: block;
    mask: var(--scroll-mask);
    overflow: auto;
    overscroll-behavior: contain;
    padding: 1.5rem 0;
  }

  .menu-out .menu li {
    position: relative;
    padding: .5em 1em;
    outline: thin solid #0000;
    border-radius: var(--radius);
    transition: .3s;
    text-align: center;
  }
}
</style>
